<template>
	<com-page class="com-spacing com-color-content-bg" :class="{ 'has-apply-footer': fromApply }">

		<!-- 头像区域 -->
		<view class="avatar-section">
			<view class="avatar-wrapper" @click="onChooseAvatar">
				<u-avatar size="160rpx" :src="postInfo.avatar" />
				<view class="avatar-mask">
					<com-icon name="camera" color="white" size="24" />
				</view>
			</view>
			<view class="nickname">{{ postInfo.nickname || '用户' }}</view>
			<view class="phone">
				{{ postInfo.phone ? String(postInfo.phone).replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3') : '' }}
			</view>
		</view>

		<!-- Tab切换 -->
		<view class="tab-container">
			<view class="custom-tabs">
				<view v-for="(tab, index) in tabList" :key="index" class="tab-item"
					:class="{ active: currentTab === index }" @click="onTabChange(index)">
					{{ tab.name }}
				</view>
			</view>
		</view>

		<!-- 基本信息 Tab -->
		<view v-if="currentTab === 0" class="info-section">
			<view class="info-item" @click="onEditField('name', '姓名')">
				<view class="label">姓名</view>
				<view class="value">{{ postInfo.name || '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>

			<view class="info-item" @click="onEditField('nickname', '昵称')">
				<view class="label">昵称</view>
				<view class="value">{{ postInfo.nickname || '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>

			<picker :range="genderOptions" range-key="label" :value="getPickerIndex('sex', genderOptions)"
				@change="onPickerChange($event, 'sex')">
				<view class="info-item picker-item">
					<view class="label">性别</view>
					<view class="value picker-value">{{ genderText }}</view>
					<com-icon name="arrow-right" color="#999" size="16" />
				</view>
			</picker>

			<picker mode="date" :value="postInfo.birthday || ''" :end="getCurrentDate()"
				@change="onDatePickerChange($event, 'birthday')">
				<view class="info-item picker-item">
					<view class="label">生日</view>
					<view class="value picker-value">{{ postInfo.birthday || '未设置' }}</view>
					<com-icon name="arrow-right" color="#999" size="16" />
				</view>
			</picker>

			<!-- <picker :range="idTypeOptions" range-key="label" :value="getPickerIndex('type', idTypeOptions)"
				@change="onPickerChange($event, 'type')">
				<view class="info-item picker-item">
					<view class="label">证件类型</view>
					<view class="value picker-value">{{ idTypeText }}</view>
					<com-icon name="arrow-right" color="#999" size="16" />
				</view>
			</picker>

			<view class="info-item" @click="onEditField('num', '证件号码')">
				<view class="label">证件号码</view>
				<view class="value">{{ postInfo.num || '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>

			<view class="info-item" @click="onEditField('phone', '手机号码', 'number')">
				<view class="label">手机号码</view>
				<view class="value">{{ postInfo.phone || '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view> -->

			<view class="info-item" @click="onEditField('email', '邮箱')">
				<view class="label">邮箱</view>
				<view class="value">{{ postInfo.email || '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>

			<view class="info-item" @click="onEditField('country', '国家/地区')">
				<view class="label">国家/地区</view>
				<view class="value">{{ postInfo.country || '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>

			<view class="info-item" @click="onEditField('live', '现居省/市区')">
				<view class="label">现居省/市区</view>
				<view class="value">{{ postInfo.live || '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>

			<view class="info-item" @click="onEditField('detailed', '详细地址')">
				<view class="label">详细地址</view>
				<view class="value">{{ postInfo.detailed || '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>

			<!-- <picker :range="qualificationOptions" range-key="label"
				:value="getPickerIndex('qualification', qualificationOptions)"
				@change="onPickerChange($event, 'qualification')">
				<view class="info-item picker-item">
					<view class="label">学历</view>
					<view class="value picker-value">{{ postInfo.qualification || '未设置' }}</view>
					<com-icon name="arrow-right" color="#999" size="16" />
				</view>
			</picker>

			<view class="info-item" @click="onEditField('occupation', '职业')">
				<view class="label">职业</view>
				<view class="value">{{ postInfo.occupation || '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>

			<view class="info-item" @click="onEditField('industry', '行业')">
				<view class="label">行业</view>
				<view class="value">{{ postInfo.industry || '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>

			<view class="info-item" @click="onEditField('annualSalary', '年薪', 'number')">
				<view class="label">年薪</view>
				<view class="value">{{ postInfo.annualSalary ? postInfo.annualSalary + '万' : '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view> -->

			<picker :range="bloodTypeOptions" range-key="label" :value="getPickerIndex('bloodType', bloodTypeOptions)"
				@change="onPickerChange($event, 'bloodType')">
				<view class="info-item picker-item">
					<view class="label">血型</view>
					<view class="value picker-value">{{ postInfo.bloodType || '未设置' }}</view>
					<com-icon name="arrow-right" color="#999" size="16" />
				</view>
			</picker>

			<!-- <picker mode="date" :value="postInfo.begin || ''" @change="onDatePickerChange($event, 'begin')">
				<view class="info-item picker-item">
					<view class="label">有效开始时间</view>
					<view class="value picker-value">{{ postInfo.begin || '未设置' }}</view>
					<com-icon name="arrow-right" color="#999" size="16" />
				</view>
			</picker>

			<picker mode="date" :value="postInfo.end || ''" @change="onDatePickerChange($event, 'end')">
				<view class="info-item picker-item">
					<view class="label">有效结束时间</view>
					<view class="value picker-value">{{ postInfo.end || '未设置' }}</view>
					<com-icon name="arrow-right" color="#999" size="16" />
				</view>
			</picker> -->
		</view>

		<!-- 紧急联系人信息 Tab -->
		<view v-if="currentTab === 1" class="info-section">
			<view class="info-item" @click="onEditField('urgentName', '紧急联系人姓名')">
				<view class="label">姓名</view>
				<view class="value">{{ postInfo.urgentName || '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>

			<view class="info-item" @click="onEditField('urgentPhone', '紧急联系人电话', 'number')">
				<view class="label">电话</view>
				<view class="value">{{ postInfo.urgentPhone || '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>

			<picker :range="urgentRelationshipOptions" range-key="label"
				:value="getPickerIndex('urgentRelationship', urgentRelationshipOptions)"
				@change="onPickerChange($event, 'urgentRelationship')">
				<view class="info-item picker-item">
					<view class="label">关系</view>
					<view class="value picker-value">{{ postInfo.urgentRelationship || '未设置' }}</view>
					<com-icon name="arrow-right" color="#999" size="16" />
				</view>
			</picker>

			<view class="info-item" @click="onEditField('urgentDetailed', '紧急联系人详细地址')">
				<view class="label">详细地址</view>
				<view class="value">{{ postInfo.urgentDetailed || '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>
		</view>

		<!-- 更多资料 Tab -->
		<view v-if="currentTab === 2" class="info-section">
			<view class="info-item" @click="onEditField('physicalCondition', '身体状况', 'textarea')">
				<view class="label">身体状况</view>
				<view class="value">{{ postInfo.physicalCondition || '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>

			<view class="info-item" @click="onEditField('runningYear', '参与跑步年数', 'number')">
				<view class="label">参与跑步年数</view>
				<view class="value">{{ postInfo.runningYear ? postInfo.runningYear + '年' : '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>

			<view class="info-item" @click="onEditField('weeklyRunning', '每周跑步次数', 'number')">
				<view class="label">每周跑步次数</view>
				<view class="value">{{ postInfo.weeklyRunning ? postInfo.weeklyRunning + '次' : '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>

			<view class="info-item" @click="onEditField('monthlyRunning', '每月跑步公里', 'number')">
				<view class="label">每月跑步公里</view>
				<view class="value">{{ postInfo.monthlyRunning ? postInfo.monthlyRunning + '公里' : '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>

			<view class="info-item" @click="onEditField('participateFrequency', '参加上马次数', 'number')">
				<view class="label">参加上马次数</view>
				<view class="value">{{ postInfo.participateFrequency ? postInfo.participateFrequency + '次' : '未设置' }}
				</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>

			<picker mode="date" :value="postInfo.firstTimeComplete || ''"
				@change="onDatePickerChange($event, 'firstTimeComplete')">
				<view class="info-item picker-item">
					<view class="label">首次完成全马日期</view>
					<view class="value picker-value">{{ postInfo.firstTimeComplete || '未设置' }}</view>
					<com-icon name="arrow-right" color="#999" size="16" />
				</view>
			</picker>

			<view class="info-item" @click="onEditField('halfHorseDest', '半马最好成绩')">
				<view class="label">半马最好成绩</view>
				<view class="value">{{ postInfo.halfHorseDest || '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>

			<view class="info-item" @click="onEditField('runningApp', '使用跑步软件')">
				<view class="label">使用跑步软件</view>
				<view class="value">{{ postInfo.runningApp || '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>

			<view class="info-item" @click="onEditField('runningShoeDrand', '穿着跑鞋品牌')">
				<view class="label">穿着跑鞋品牌</view>
				<view class="value">{{ postInfo.runningShoeDrand || '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>

			<view class="info-item" @click="onEditField('clothingDrand', '穿着服装品牌')">
				<view class="label">穿着服装品牌</view>
				<view class="value">{{ postInfo.clothingDrand || '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>

			<view class="info-item" @click="onEditField('watchDrand', '佩戴运动手表品牌')">
				<view class="label">佩戴运动手表品牌</view>
				<view class="value">{{ postInfo.watchDrand || '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>

			<view class="info-item" @click="onEditField('sportsDrink', '最爱喝运动饮料品牌')">
				<view class="label">最爱运动饮料品牌</view>
				<view class="value">{{ postInfo.sportsDrink || '未设置' }}</view>
				<com-icon name="arrow-right" color="#999" size="16" />
			</view>
		</view>

		<!-- 编辑弹窗 -->
		<view v-if="showEditModal" class="modal-overlay" @click.self="onCancelEdit">
			<view class="modal-container">
				<view class="modal-header">
					<view class="modal-title">编辑{{ editFieldName }}</view>
					<view class="close-btn" @click="onCancelEdit">✕</view>
				</view>

				<view class="modal-content">
					<!-- 文本输入 -->
					<view v-if="editType === 'input'" class="edit-item">
						<input v-model="editValue" :placeholder="`请输入${editFieldName}`"
							:maxlength="editField === 'name' ? 10 : 50" class="input-field" >
					</view>

					<!-- 数字输入 -->
					<view v-if="editType === 'number'" class="edit-item">
						<input v-model="editValue" :placeholder="`请输入${editFieldName}`" type="number"
							class="input-field" >
					</view>

					<!-- 文本域 -->
					<view v-if="editType === 'textarea'" class="edit-item">
						<textarea v-model="editValue" :placeholder="`请输入${editFieldName}`" maxlength="200"
							class="textarea-field" />
					</view>

					<!-- 日期选择 -->
					<view v-if="editType === 'date'" class="edit-item">
						<view class="date-picker-container">
							<picker mode="date" :value="editValue"
								:end="editField === 'birthday' ? getCurrentDate() : ''" @change="onDateChange"
								class="date-picker">
								<view class="date-display">
									{{ editValue || `请选择${editFieldName}` }}
								</view>
							</picker>
						</view>
					</view>

					<!-- 时间选择 -->
					<view v-if="editType === 'time'" class="edit-item">
						<view class="time-picker-container">
							<picker mode="time" :value="editValue" @change="onTimeChange" class="time-picker">
								<view class="time-display">
									{{ editValue || `请选择${editFieldName}` }}
								</view>
							</picker>
						</view>
					</view>

					<!-- 选择器 -->
					<view v-if="editType === 'select'" class="edit-item">
						<view class="select-options">
							<view v-for="option in selectOptions" :key="option.value" class="option-item"
								:class="{ active: editValue === option.value }" @click="editValue = option.value">
								{{ option.label }}
							</view>
						</view>
					</view>
				</view>

				<view class="modal-footer">
					<view class="btn btn-cancel" @click="onCancelEdit">取消</view>
					<view class="btn btn-confirm" @click="onSaveEdit">确定</view>
				</view>
			</view>
		</view>

		<!-- 报名流程底部按钮 -->
		<view v-if="fromApply" class="apply-footer">
			<view class="apply-buttons">
				<button class="btn btn-secondary" @click="onPrevStep">上一步</button>
				<button class="btn btn-primary" @click="onNextStep">下一步</button>
			</view>
		</view>
	</com-page>
</template>

<script>
	export default {
		name: 'UserInfo',
		data() {
			return {
				currentTab: 0,
				tabList: [{
						name: this.$t('pages_user_info_info_msg_9e5ffa06')
					},
					{
						name: this.$t('pages_user_info_info_msg_4335bb37')
					},
					{
						name: this.$t('pages_user_info_info_msg_0169e326')
					}
				],
				showEditModal: false,
				editField: '',
				editFieldName: '',
				editType: 'input',
				editValue: '',
				selectOptions: [],
				uploadingAvatar: false,
				fromApply: false // 是否来自报名流程
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo || {}
			},
			postInfo() {
				return this.userInfo || {}
			},
			genderText() {
				const genderMap = {
					1: this.$t('pages_user_info_info_text_36a4908a'),
					2: this.$t('pages_user_info_info_text_87c835a6')
				}
				return genderMap[this.postInfo.sex] || this.$t('pages_user_info_info_msg_fe2d26a2')
			},
			idTypeText() {
				const typeMap = {
					'1': this.$t('pages_user_info_info_msg_f33656e1')
				}
				return typeMap[this.postInfo.type] || this.$t('pages_user_info_info_msg_fe2d26a2')
			},
			genderOptions() {
				return [{
						value: '1',
						label: this.$t('pages_user_info_info_text_36a4908a')
					},
					{
						value: '2',
						label: this.$t('pages_user_info_info_text_87c835a6')
					}
				]
			},
			idTypeOptions() {
				return [{
					value: '1',
					label: this.$t('pages_user_info_info_msg_f33656e1')
				}]
			},
			qualificationOptions() {
				return [{
						value: this.$t('pages_user_info_info_text_b2191487'),
						label: this.$t('pages_user_info_info_text_b2191487')
					},
					{
						value: this.$t('pages_user_info_info_text_fefa7c84'),
						label: this.$t('pages_user_info_info_text_fefa7c84')
					},
					{
						value: this.$t('pages_user_info_info_text_2aa9f525'),
						label: this.$t('pages_user_info_info_text_2aa9f525')
					},
					{
						value: this.$t('pages_user_info_info_text_40b14fc5'),
						label: this.$t('pages_user_info_info_text_40b14fc5')
					},
					{
						value: this.$t('pages_user_info_info_text_e6de6983'),
						label: this.$t('pages_user_info_info_text_e6de6983')
					},
					{
						value: this.$t('pages_user_info_info_text_7d27be00'),
						label: this.$t('pages_user_info_info_text_7d27be00')
					}
				]
			},
			bloodTypeOptions() {
				return [{
						value: 'A',
						label: 'A型'
					},
					{
						value: 'B',
						label: 'B型'
					},
					{
						value: 'AB',
						label: 'AB型'
					},
					{
						value: 'O',
						label: 'O型'
					}
				]
			},
			urgentRelationshipOptions() {
				return [{
						value: this.$t('pages_user_info_info_text_a93e956a'),
						label: this.$t('pages_user_info_info_text_a93e956a')
					},
					{
						value: this.$t('pages_user_info_info_text_b27f597c'),
						label: this.$t('pages_user_info_info_text_b27f597c')
					},
					{
						value: this.$t('pages_user_info_info_text_61d54902'),
						label: this.$t('pages_user_info_info_text_61d54902')
					},
					{
						value: this.$t('pages_user_info_info_text_84e10d42'),
						label: this.$t('pages_user_info_info_text_84e10d42')
					},
					{
						value: this.$t('pages_user_info_info_msg_77bbe65e'),
						label: this.$t('pages_user_info_info_msg_77bbe65e')
					},
					{
						value: this.$t('pages_user_info_info_text_9d53230a'),
						label: this.$t('pages_user_info_info_text_9d53230a')
					},
					{
						value: this.$t('pages_user_info_info_text_3a1ff305'),
						label: this.$t('pages_user_info_info_text_3a1ff305')
					},
					{
						value: this.$t('pages_user_info_info_text_0d98c747'),
						label: this.$t('pages_user_info_info_text_0d98c747')
					}
				]
			}
		},
		methods: {
			onTabChange(index) {
				this.currentTab = index
			},

			onEditField(field, fieldName, type = 'input') {
				this.editField = field
				this.editFieldName = fieldName
				this.editType = type
				this.editValue = this.postInfo[field] || ''

				// 设置选择器选项
				this.setSelectOptions(field)

				this.showEditModal = true
			},

			setSelectOptions(field) {
				switch (field) {
					case 'sex':
						this.selectOptions = [{
								value: '1',
								label: this.$t('pages_user_info_info_text_36a4908a')
							},
							{
								value: '2',
								label: this.$t('pages_user_info_info_text_87c835a6')
							}
						]
						break
					case 'type':
						this.selectOptions = [{
							value: '1',
							label: this.$t('pages_user_info_info_msg_f33656e1')
						}]
						break
					case 'qualification':
						this.selectOptions = [{
								value: this.$t('pages_user_info_info_text_b2191487'),
								label: this.$t('pages_user_info_info_text_b2191487')
							},
							{
								value: this.$t('pages_user_info_info_text_fefa7c84'),
								label: this.$t('pages_user_info_info_text_fefa7c84')
							},
							{
								value: this.$t('pages_user_info_info_text_2aa9f525'),
								label: this.$t('pages_user_info_info_text_2aa9f525')
							},
							{
								value: this.$t('pages_user_info_info_text_40b14fc5'),
								label: this.$t('pages_user_info_info_text_40b14fc5')
							},
							{
								value: this.$t('pages_user_info_info_text_e6de6983'),
								label: this.$t('pages_user_info_info_text_e6de6983')
							},
							{
								value: this.$t('pages_user_info_info_text_7d27be00'),
								label: this.$t('pages_user_info_info_text_7d27be00')
							}
						]
						break
					case 'bloodType':
						this.selectOptions = [{
								value: 'A',
								label: 'A型'
							},
							{
								value: 'B',
								label: 'B型'
							},
							{
								value: 'AB',
								label: 'AB型'
							},
							{
								value: 'O',
								label: 'O型'
							}
						]
						break
					case 'urgentRelationship':
						this.selectOptions = [{
								value: this.$t('pages_user_info_info_text_a93e956a'),
								label: this.$t('pages_user_info_info_text_a93e956a')
							},
							{
								value: this.$t('pages_user_info_info_text_b27f597c'),
								label: this.$t('pages_user_info_info_text_b27f597c')
							},
							{
								value: this.$t('pages_user_info_info_text_61d54902'),
								label: this.$t('pages_user_info_info_text_61d54902')
							},
							{
								value: this.$t('pages_user_info_info_text_84e10d42'),
								label: this.$t('pages_user_info_info_text_84e10d42')
							},
							{
								value: this.$t('pages_user_info_info_msg_77bbe65e'),
								label: this.$t('pages_user_info_info_msg_77bbe65e')
							},
							{
								value: this.$t('pages_user_info_info_text_9d53230a'),
								label: this.$t('pages_user_info_info_text_9d53230a')
							},
							{
								value: this.$t('pages_user_info_info_text_3a1ff305'),
								label: this.$t('pages_user_info_info_text_3a1ff305')
							},
							{
								value: this.$t('pages_user_info_info_text_0d98c747'),
								label: this.$t('pages_user_info_info_text_0d98c747')
							}
						]
						break
				}
			},

			onCancelEdit() {
				this.showEditModal = false
				this.editField = ''
				this.editFieldName = ''
				this.editValue = ''
				this.selectOptions = []
			},

			async onSaveEdit() {
				try {
					// 处理数据类型
					let value = this.editValue
					if (this.editType === 'number') {
						value = value ? Number(value) : 0
					}

					// 构建更新数据
					const updatedData = {
						...this.postInfo,
						[this.editField]: value
					}

					// 调用更新接口
					await this.$api.user.updateInfo(updatedData)

					// 重新获取用户信息
					const info = await this.$api.user.getInfo()
					this.$store.dispatch('setUserInfo', info['post'])

					uni.showToast({
						title: this.$t('pages_user_info_info_msg_69be6717'),
						icon: 'success'
					})
					this.onCancelEdit()
				} catch (error) {
					uni.showToast({
						title: error.message || this.$t('pages_user_info_info_msg_5badb3ba'),
						icon: 'none'
					})
				}
			},

			async onChooseAvatar() {
				if (this.uploadingAvatar) return

				try {
					const result = await uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						sourceType: ['album', 'camera']
					})

					if (result[1] && result[1].tempFilePaths && result[1].tempFilePaths.length > 0) {
						await this.uploadAvatar(result[1].tempFilePaths[0])
					}
				} catch (error) {
					console.log('选择图片取消')
				}
			},

			async uploadAvatar(filePath) {
				this.uploadingAvatar = true
				uni.showLoading({
					title: '上传中...'
				})

				try {
					const avatarUrl = await this.$api.user.uploadAvatar(filePath)

					// 更新头像
					const updatedData = {
						...this.postInfo,
						avatar: avatarUrl
					}

					await this.$api.user.updateInfo(updatedData)

					// 重新获取用户信息
					const info = await this.$api.user.getInfo()
					this.$store.dispatch('setUserInfo', info['post'])

					uni.hideLoading()
					uni.showToast({
						title: this.$t('pages_user_info_info_msg_f0a4c7e5'),
						icon: 'success'
					})
				} catch (error) {
					uni.hideLoading()
					uni.showToast({
						title: error.message || this.$t('pages_user_info_info_msg_0125b3c2'),
						icon: 'none'
					})
				} finally {
					this.uploadingAvatar = false
				}
			},

			getCurrentDate() {
				const now = new Date()
				const year = now.getFullYear()
				const month = String(now.getMonth() + 1).padStart(2, '0')
				const day = String(now.getDate()).padStart(2, '0')
				return `${year}-${month}-${day}`
			},

			onDateChange(e) {
				this.editValue = e.detail.value
			},

			onTimeChange(e) {
				this.editValue = e.detail.value
			},

			getPickerIndex(field, options) {
				const value = this.postInfo[field]
				return options.findIndex(option => option.value === value)
			},

			async onPickerChange(e, field) {
				const options = this.getOptionsForField(field)
				const selectedOption = options[e.detail.value]
				if (selectedOption) {
					await this.saveFieldValue(field, selectedOption.value)
				}
			},

			async onDatePickerChange(e, field) {
				await this.saveFieldValue(field, e.detail.value)
			},


			getOptionsForField(field) {
				const optionsMap = {
					'sex': this.genderOptions,
					'type': this.idTypeOptions,
					'qualification': this.qualificationOptions,
					'bloodType': this.bloodTypeOptions,
					'urgentRelationship': this.urgentRelationshipOptions
				}
				return optionsMap[field] || []
			},

			async saveFieldValue(field, value) {
				try {
					// 构建更新数据
					const updatedData = {
						...this.postInfo,
						[field]: value
					}

					// 调用更新接口
					await this.$api.user.updateInfo(updatedData)

					// 重新获取用户信息
					const info = await this.$api.user.getInfo()
					this.$store.dispatch('setUserInfo', info['post'])

					uni.showToast({
						title: this.$t('pages_user_info_info_msg_69be6717'),
						icon: 'success'
					})
				} catch (error) {
					uni.showToast({
						title: error.message || this.$t('pages_user_info_info_msg_5badb3ba'),
						icon: 'none'
					})
				}
			},

			onPrevStep() {
				// 返回上一步：赛事需知页面
				uni.navigateBack()
			},

			onNextStep() {
				// 报名流程下一步：跳转到商品列表页面
				const evtId = uni.getStorageSync('currentEventId');
				console.log('用户信息页面获取到的赛事ID:', evtId);
				
				if (!evtId) {
					uni.showModal({
						title: this.$t('pages_category_category_text_02d9819d'),
						content: '缺少赛事信息，请返回首页重新选择赛事',
						showCancel: false,
						success: () => {
							uni.switchTab({
								url: '/pages/index/index'
							});
						}
					});
					return;
				}
				
				console.log('准备跳转到商品选择页面，参数:', `evtId=${evtId}&fromApply=true`);
				
				uni.navigateTo({
					url: `/pages/category/category?evtId=${evtId}&fromApply=true`,
					success: () => {
						console.log('跳转成功');
					},
					fail: (err) => {
						console.error('跳转失败:', err);
						uni.showToast({
							title: '跳转失败，请重试',
							icon: 'none'
						});
					}
				});
			},

			async onLoad(options) {
				// 检测是否来自报名流程
				if (options && options.fromApply === 'true') {
					this.fromApply = true;
					uni.setNavigationBarTitle({
						title: this.$t('pages_user_info_info_msg_33bb3f26')
					});
				}
				
				// 如果没有用户信息，重新获取
				if (!this.userInfo.userId) {
					try {
						const info = await this.$api.user.getInfo()
						this.$store.dispatch('setUserInfo', info['post'])
					} catch (error) {
						uni.showToast({
							title: this.$t('pages_user_info_info_desc_dc486eaf'),
							icon: 'none'
						})
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.avatar-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0 60rpx;

		.avatar-wrapper {
			position: relative;
			margin-bottom: 24rpx;
		}

		.avatar-mask {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 48rpx;
			height: 48rpx;
			background: #007aff;
			border-radius: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 4rpx solid #fff;
		}
	}

	.nickname {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 8rpx;
	}

	.phone {
		font-size: 28rpx;
		color: #999;
	}

	.tab-container {
		margin-bottom: 40rpx;

		.custom-tabs {
			display: flex;
			background: #fff;
			border-radius: 16rpx;
			margin: 0 24rpx;

			.tab-item {
				flex: 1;
				text-align: center;
				padding: 24rpx 0;
				font-size: 30rpx;
				color: #999;
				position: relative;

				&.active {
					color: #007aff;
					font-weight: 500;

					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 60rpx;
						height: 4rpx;
						background: #007aff;
						border-radius: 2rpx;
					}
				}
			}
		}
	}

	.info-section {
		margin-bottom: 40rpx;

		.info-item {
			display: flex;
			align-items: center;
			padding: 32rpx 24rpx;
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 2rpx;

			.label {
				font-size: 30rpx;
				color: #333;
				width: 140rpx;
			}

			.value {
				flex: 1;
				font-size: 30rpx;
				color: #666;
				text-align: right;
				margin-right: 16rpx;
			}

			.picker-value {
				flex: 1;
				font-size: 30rpx;
				color: #666;
				text-align: right;
				margin-right: 16rpx;
			}

			.picker-item {
				display: flex;
				align-items: center;
				padding: 32rpx 24rpx;
				background: #fff;
				border-radius: 16rpx;
				margin-bottom: 2rpx;
			}
		}
	}

	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}

	.modal-container {
		background: #fff;
		border-radius: 16rpx;
		margin: 0 60rpx;
		width: calc(100vw - 120rpx);
		max-width: 600rpx;
		overflow: hidden;
		box-sizing: border-box;
	}

	.modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx;
		border-bottom: 1px solid #f0f0f0;

		.modal-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
		}

		.close-btn {
			font-size: 40rpx;
			color: #999;
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.modal-content {
		padding: 40rpx 32rpx;
		overflow: hidden;

		.edit-item {
			margin-bottom: 24rpx;
			width: 100%;
			overflow: hidden;
		}

		.input-field {
			width: 100%;
			height: 80rpx;
			border: 1px solid #e0e0e0;
			border-radius: 8rpx;
			padding: 0 24rpx;
			font-size: 30rpx;
			color: #333;
			box-sizing: border-box;

			&:focus {
				border-color: #007aff;
			}
		}

		.textarea-field {
			width: 100%;
			min-height: 200rpx;
			border: 1px solid #e0e0e0;
			border-radius: 8rpx;
			padding: 24rpx;
			font-size: 30rpx;
			color: #333;
			resize: none;
			box-sizing: border-box;

			&:focus {
				border-color: #007aff;
			}
		}

		.date-picker-container,
		.time-picker-container {
			width: 100%;

			.date-picker,
			.time-picker {
				width: 100%;
			}

			.date-display,
			.time-display {
				width: 100%;
				height: 80rpx;
				border: 1px solid #e0e0e0;
				border-radius: 8rpx;
				padding: 0 24rpx;
				font-size: 30rpx;
				color: #333;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				background: #fff;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					right: 24rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 0;
					height: 0;
					border-left: 10rpx solid transparent;
					border-right: 10rpx solid transparent;
					border-top: 10rpx solid #999;
				}

				&:empty::before {
					content: attr(placeholder);
					color: #999;
				}
			}
		}

		.select-options {
			.option-item {
				padding: 24rpx 0;
				font-size: 30rpx;
				color: #333;
				border-bottom: 1px solid #f0f0f0;
				display: flex;
				align-items: center;
				position: relative;

				&:last-child {
					border-bottom: none;
				}

				&.active {
					color: #007aff;

					&::after {
						content: '✓';
						position: absolute;
						right: 0;
						font-size: 32rpx;
					}
				}
			}
		}
	}

	.modal-footer {
		display: flex;
		border-top: 1px solid #f0f0f0;

		.btn {
			flex: 1;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			border-radius: 0;

			&.btn-cancel {
				color: #666;
				border-right: 1px solid #f0f0f0;
			}

			&.btn-confirm {
				color: #007aff;
				font-weight: 500;
			}
		}
	}

	// 有底部按钮时的页面内边距
	.has-apply-footer {
		padding-bottom: 136rpx; /* 88rpx按钮高度 + 24rpx*2 padding */
	}

	// 报名流程底部按钮
	.apply-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		border-top: 1px solid #f0f0f0;
		padding: 24rpx;
		z-index: 100;

		.apply-buttons {
			display: flex;
			gap: 24rpx;

			.btn {
				flex: 1;
				height: 88rpx;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-weight: 500;
				border: none;

				&.btn-secondary {
					background: #f5f5f5;
					color: #666;
				}

				&.btn-primary {
					background: #007aff;
					color: white;
				}
			}
		}
	}
</style>
